<!DOCTYPE html>
<html lang="en"  xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
  <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./axios.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
	<link href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.4.10/dist/antd.min.css" rel="stylesheet" type="text/css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
	<style type="text/css">
		.highlight {
		  background-color: rgb(255, 192, 105);
		  padding: 0px;
		}
		.editable-add-btn {
		  margin-bottom: 8px;
		}
		#test{
			display:none;
			height:600px;
			width:500px;
			position:absolute;
			top:0%;
			left:20%;
		}
		.notclick {
			pointer-events: none;
			opacity:0.4;
		}
	</style>
</head>
<body>
<div id="app1">
  <div id="user">
  <a-button class="editable-add-btn" @click="handleAdd">
    Add
  </a-button>
  <a style="float:right;margin-right:100px;" @click="getData">刷新</a>
  <a-dropdown :trigger="['click']">
    <a style="float:right;margin-right:50px;" class="ant-dropdown-link" @click="e => e.preventDefault()">
      下载为 <a-icon type="down" />
    </a>
	
    <a-menu slot="overlay">
		<a-menu-item key="0">
			<a @click="getPdf">pdf</a>
		</a-menu-item>
		<a-menu-item key="1">
			<a id="excel" @click="getExcel">excel</a>
		</a-menu-item>
    </a-menu>
  </a-dropdown>
   <table>
  <a-table :data-source="data" :columns="columns" :pagination="{ pageSize: 10 }">
	<span slot="action" slot-scope="text, record">
		<a-popconfirm
			title="确定锁定?"
			ok-text="Yes"
			cancel-text="No"
			@confirm="locks(record.resId)"
			@cancel="cancel"
		  >
			<a v-if="lock[record.resId]">lock&nbsp;&nbsp;&nbsp;&nbsp;</a>
		</a-popconfirm>
		<a-popconfirm
			title="确定解锁?"
			ok-text="Yes"
			cancel-text="No"
			@confirm="unlocks(record.resId)"
			@cancel="cancel"
		  >
			<a v-if="unlock[record.resId]">unlock&nbsp;&nbsp;&nbsp;&nbsp;</a>
		</a-popconfirm>
		<a-popconfirm
			title="确定删除?"
			ok-text="Yes"
			cancel-text="No"
			@confirm="deletes(record.resId)"
			@cancel="cancel"
		  >
			<a v-if="unlock[record.resId]">delete</a>
		</a-popconfirm>
		
    </span>
    <div
      slot="filterDropdown"
      slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
      style="padding: 8px"
    >
      <a-input
        v-ant-ref="c => (searchInput = c)"
        :placeholder="`Search ${column.dataIndex}`"
        :value="selectedKeys[0]"
        style="width: 188px; margin-bottom: 8px; display: block;"
        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
        @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
      />
    </div>
    <a-icon
      slot="filterIcon"
      slot-scope="filtered"
      type="search"
      :style="{ color: filtered ? '#108ee9' : undefined }"
    />
  </a-table>
  </table>
  </div>
  <div id="test">
	<div style="position:absolute;top:5%;right:5%;">
		<a @click="close"><a-icon type="close" /></a>
	</div>
	<iframe src="addCheck.html" id="add" name="add" frameBorder=1 scrolling=no height="550px" width="500px" ></iframe>
  </div>
</div>
<script>
    var app = new Vue({
        // e1: '#app',
        //注意这时l来着l
        el: '#app1',
        data() {
			return {
			  data:[],
			  lock:{},
			  unlock:{},
			  searchText: '',
			  searchInput: null,
			  searchedColumn: '',
			  columns: [
				{
				  title: '用户名',
				  dataIndex: 'username',
				  key: 'username',
				  scopedSlots: {
					filterDropdown: 'filterDropdown',
					filterIcon: 'filterIcon',
					customRender: 'customRender',
				  },
				  onFilter: (value, record) =>
					record.username
					  .toString()
					  .toLowerCase()
					  .includes(value.toLowerCase()),
				  onFilterDropdownVisibleChange: visible => {
					if (visible) {
					  setTimeout(() => {
						this.searchInput.focus();
					  }, 0);
					}
				  },
					sortDirections: ['descend', 'ascend'],
					sorter: (a, b) => a.username.length - b.username.length,
				},
				{
				  title: '密码',
				  dataIndex: 'password',
				  key: 'password',
				},
				{
				  title: 'openId',
				  dataIndex: 'openId',
				  key: 'openId',
				},
				{
				  title: '是否锁定',
				  dataIndex: 'enabled',
				  key: 'enabled',
				  filters: [
					{ text: '正常', value: '正常' },
					{ text: '已锁定', value: '已锁定' },
				  ],
				  onFilter: (value, record) => record.enabled.indexOf(value) === 0,
				},
				{
					title: 'Action',
					key: 'action',
					scopedSlots: { customRender: 'action' },
				},
			  ],
			};
		  },
		  mounted(){
			this.getData();
		  },
		  methods: {
			cancel(){
				console.log(e);
			},
			close(){
				$("#test").hide("slow");
				$("#user").removeClass("notclick");
			},
			getExcel(){
				// 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码
				var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementsByTagName("table")[0].outerHTML + "</body></html>";
				// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
				var blob = new Blob([html], { type: "application/vnd.ms-excel" });
				var a = document.getElementById("excel");
				// 利用URL.createObjectURL()方法为a元素生成blob URL
				a.href = URL.createObjectURL(blob);
				// 设置文件名
				a.download = "检察人员账号信息表.xls";
			},
			getPdf(){
			  var target = document.getElementById("app1");
			  target.style.background = "#FFFFFF";

			  html2canvas(target, {
				onrendered:function(canvas) {
					var contentWidth = canvas.width;
					var contentHeight = canvas.height;

				//一页pdf显示html页面生成的canvas高度;
				var pageHeight = contentWidth / 592.28 * 841.89;
				//未生成pdf的html页面高度
				var leftHeight = contentHeight;
				//页面偏移
				var position = 0;
				//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
				var imgWidth = 595.28;
				var imgHeight = 592.28/contentWidth * contentHeight;

				var pageData = canvas.toDataURL('image/jpeg', 1.0);

				var pdf = new jsPDF('', 'pt', 'a4');

				//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
				//当内容未超过pdf一页显示的范围，无需分页
				if (leftHeight < pageHeight) {
				pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight );
				} else {
					while(leftHeight > 0) {
						pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
						leftHeight -= pageHeight;
						position -= 841.89;
						//避免添加空白页
						if(leftHeight > 0) {
						  pdf.addPage();
						}
					}
				}

				pdf.save("检察人员账号.pdf");
			}
		  })
			},
			handleAdd(){
				$("#test").show("slow");
				$("#user").addClass("notclick");
			},
			handleSearch(selectedKeys, confirm, dataIndex) {
			  confirm();
			  this.searchText = selectedKeys[0];
			  this.searchedColumn = dataIndex;
			},
			getData(){
				
				axios.get("http://47.94.215.148:8080/admin/getCheInfo",{
                        withCredentials: true,
                    }).then((resp)=>{
					this.data=[];
					for(var i in resp.data.message){
						if(resp.data.message[i].enabled==1){
							resp.data.message[i].enabled="正常";
							this.unlock[resp.data.message[i].resId]=false;
							this.lock[resp.data.message[i].resId]=true;
						}
						else{
							resp.data.message[i].enabled="已锁定";
							this.lock[resp.data.message[i].resId]=false;
							this.unlock[resp.data.message[i].resId]=true;
						}
						this.data.push(resp.data.message[i])
					}
				})
			},
			deletes(ids){
				axios.get("http://47.94.215.148:8080/admin/deleteAccount?id="+ids,{
                        withCredentials: true,
                    }).then((resp)=>{
					console.log(resp.data);
					if(resp.data.status==1){
						this.$message.success("删除成功！！");
						this.getData();
					}
					else{
						this.$message.error("删除失败~！！！");
					}
				});
			},
			unlocks(ids){
				axios.get("http://47.94.215.148:8080/admin/unlockAccount?id="+ids,{
                        withCredentials: true,
                    }).then((resp)=>{
					console.log(resp.data);
					if(resp.data.status==1){
						this.$message.success("解锁成功！！");
						this.getData();
					}
					else{
						this.$message.error("解锁失败~！！！");
					}
				});
			},
			locks(ids){
				axios.get("http://47.94.215.148:8080/admin/lockAccount?id="+ids,{
                        withCredentials: true,
                    }).then((resp)=>{
					console.log(resp.data);
					if(resp.data.status==1){
						this.$message.success("锁定成功！！");
						this.getData();
					}
					else{
						this.$message.error("锁定失败~！！！");
					}
				});
			},
		  },
    })
</script>
</body>
</html>